<template>
	<div id="app">
		<!-- 		<div v-for="(item, index) in imgList" :key="item">
			<el-image style="width: 100px; height: 100px" :src="require('@/assets/images/'+'test.png')" :preview-src-list="[require('@/assets/images/'+'test.png')]">
			</el-image>
		</div> -->
		<div style="height: 20px;display:flex;align-items: center;">
			<span style="height: 20px;line-height: 20px;font-size: 20px;margin-bottom: 20px;">查看所有设备</span>
		</div>
		<template>
			<el-table :data="tableData" border style="width: 100%">
				<el-table-column fixed label="序号" type="index" width="50">
				</el-table-column>
				<el-table-column fixed prop="eId" label="设备ID" width="180">
				</el-table-column>
				<el-table-column prop="eName" label="设备名称" width="180">
				</el-table-column>
				<el-table-column prop="eDescription" label="设备描述">
				</el-table-column>
				<!-- 				<el-table-column prop="imageUrl" label="图片Url">
					    <span class="demonstration"></span>
					    <el-image :src="src">
					      <div slot="placeholder" class="image-slot">
					        <span class="dot">...</span>
					      </div>
					    </el-image>
				</el-table-column> -->

				<el-table-column prop="imageUrl" label="图片" width="200px">
					<template slot-scope="scope" v-if="scope.row.imageUrl">
						<!-- <el-button size="mini" @click="findimage(scope.row)">查看</el-button> -->
						<el-image style="width: 160px; height: 80px"
							:src="require('@/assets/equipments/'+scope.row.imageUrl)"
							:preview-src-list="[require('@/assets/equipments/'+scope.row.imageUrl)]" />
					</template>
				</el-table-column>
				<el-table-column prop="categoryId" label="设备类别Id">
				</el-table-column>

				<el-table-column prop="eRealprice" label="设备真实售价">
				</el-table-column>
				<el-table-column prop="ePrice" label="设备定价">
				</el-table-column>
				<el-table-column prop="eConuts" label="设备库存">
				</el-table-column>
				<el-table-column prop="eStatus" :formatter="stateFormat" label="设备是否上架">
				</el-table-column>

				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button size="mini" @click.prevent="handleEdit(scope.$index, scope.row)">编辑</el-button>
						<el-button size="mini" style="margin: 0 auto;" type="danger" @click="handleDelete(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</template>
	</div>
</template>

<script>
	//import request from '../utils/axios/request.js'
	import request from '@/utils/axios/request.js'
	export default {
		inject: ['reload'],
		data() {
			return {
				token: '',
				tableData: [{
					eId: '',
					eName: '',
					eDescription: '',
					imageUrl: '',
					categoryId: '',
					ePrice: '',
					eRealprice: '',
					eStatus: '',
					eConuts: ''
				}]
			}
		},
		methods: {
			stateFormat(row, column) {
				if (row.eStatus === true) {
					return '已上架'
				} else {
					return '未上架'
				}
			},

			findimage(row) {
				console.log(row)
			},
			handleEdit(index, row) {
				console.log(index, row);
				console.log(row.eId)

				this.$cookies.set("updateEid", row.eId)
				this.$router.push('/adminIndex/updateEquipment')

				// request({
				// 	method: 'put',
				// 	url: '/equipments/',
				// }).then(res => {
				// 	console.log(res)
				// })
			},
			handleDelete(row) {
				alert('确定要删除设备编号为' + row.eId + '的设备信息吗')
				request({
					method: 'delete',
					url: '/equipments/' + row.eId,
				}).then(res => {
					console.log(res)
					if (res.data.code == 100) {
						alert('删除成功')
						//进行刷新页面操作
						// this.$router.go(0)//此方式刷新页面会白屏一下，体验不好
						// location.reload()//这种也是一闪，效果不好
						this.reload()
					} else if (res.data.code == 40) {
						alert('删除失败，不存在该编号的设备')
					}
				})
			}
		},
		created() {
			this.t = this.$cookies.get("token")
			// console.log(this.token)
			console.log(this.src)
			request({
					method: 'post',
					url: '/equipments/findall',
					headers: {
						token: this.t
					}
				})
				.then((res) => {
					console.log(res)
					// this.t = this.$cookies.get("token")
					// console.log(t)
					// 请求成功
					//this.tableData[0].eId = res.data.data[0].eId
					var jsonObj = JSON.parse(JSON.stringify(res.data.data));
					//console.log(jsonObj[0].eId)
					// for (var i = 0; i < jsonObj.length; i++) {
					// 	jsonObj[i].index = 'table' + jsonObj[i].menuId;
					// }
					this.tableData = jsonObj;

					console.log(jsonObj)
					// console.log(res) // res 服务器响应回来的数据
					// console.log(res.data.data[0])

				})
			//console.log("创建成功")
		}
	}
</script>

<style>
</style>